<template>
  <div>
    <HeaderNav />
    <div class="total">
      <el-tabs :tab-position="tabPosition" class="demo-tabs">
        <el-tab-pane>
          <template #label>
            <span class="tabs-label">
              <span>个人资料</span>
            </span>
          </template>
          <div class="content">
            <!-- <div>
              <span>个人资料</span>
            </div> -->
            <div class="item avatar">
              <span>头像:</span>
              <el-avatar size="large" :src="userInfoDefault.avatar" />
              <el-button :icon="Upload" round color="#5fc5ba" plain @click="updateAvatar">上传头像</el-button>
            </div>
            <div class="item name">
              <span>昵称:</span>
              <el-input v-model="userInfoDefault.username" placeholder="3-16个字符" clearable />
            </div>
            <div class="item sex">
              <span>性别：</span>
              <el-select v-model="userInfoDefault.sex" placeholder="性别" size="large">
                <el-option key="1" label="男" value="1" />
                <el-option key="2" label="女" value="0" />
                <el-option key="3" label="保密" value="-1" />
              </el-select>
            </div>
            <div class="item birthday">
              <span>生日：</span>
              <el-date-picker v-model="userInfoDefault.birthday" type="date" placeholder="选择生日" size="default" />
            </div>
            <div class="item description">
              <span>个人描述:</span>
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="userInfoDefault.description"
                placeholder="比如:爱好兴趣等" />
            </div>
            <div class="item">
              <span></span>
              <el-button :icon="Back" round @click="$router.push('/user_center')" color="#5fc5ba" plain>返回</el-button>
              <el-button :icon="Check" round color="#5fc5ba" @click="updateAvatar">确认</el-button>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span class="tabs-label">
              <span>账号设置</span>
            </span>
          </template>
          <div class="content"></div>
        </el-tab-pane>
        <el-tab-pane>
          <template #label>
            <span class="tabs-label">
              <span>退出登录</span>
            </span>
          </template>
          <div class="content"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Check, Upload, Back } from "@element-plus/icons-vue";
import HeaderNav from "@/components/common/HeaderNav.vue";
import { get } from "@/tools/api/api";
import { userInfoType } from "@/components/user/type";

/**
 * 获取个人信息
 */

// const userInfo = ref<userInfoType>({
//   avatar: '',
//   mail: '',
//   phone: '',
//   remark: '',
//   username: ''
// })

onMounted(() => {
  get("userInfo").then((res: any) => {
  
    if (res.code === 100) {
      let resData = res.data
      resData.phone = resData.phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
      resData.avatar += "http://ergou666.shop:8000/"
      Object.assign(userInfoDefault, resData);
  
    }
  })
})

const userInfoDefault = reactive({
  avatar:
    "https://img2.woyaogexing.com/2022/07/09/5ad8b0a6962a1989!400x400.jpg",
  username: "UserName",
  Signature: "dasdsfaasdfasdfasdfasdf",
  sex: "1",
  birthday: "",
  description: "",
  num1: "134",
  num2: "12",
  num3: "340",
});

const updateAvatar = () => {
};
const tabPosition = ref("left");
</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.1rem;

span {
  cursor: pointer;
  font-weight: bold;
  color: grey;
  font-size: $a-font-size * 1.2;
}

.total {
  height: auto;
  width: auto;
  margin-left: $item-width*1.5;
  margin-top: $item-height * 2;

  .content {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-left: $item-width*1.2;

    .item {
      display: flex;
      align-items: center;
      height: 0.4rem;
      width: 100%;

      &> :nth-child(1) {
        //span
        width: 0.5rem;
        font-size: $a-font-size * 0.9;
      }

      &> :nth-child(2) {
        margin-left: 0.4rem;
      }

      &> :nth-child(3) {
        margin-left: 0.4rem;
      }
    }

    .avatar {
      img {
        width: auto;
        height: auto;
      }
    }

    .avatar,
    .name,
    .sex,
    .birthday {
      width: 3rem;
    }

    .description {
      width: 3.8rem;
    }
  }

  .tabs-label {
    span {
      font-size: $a-font-size;
    }
  }
}

@media screen and (max-width:1024px) {
  .total {
    margin-left: $item-width*1;
    margin-top: $item-height * 2.6;

    .content {
      margin-left: $item-width;
      margin-top: $item-height;

      .item {
        height: $item-height*2.6;
        width: 100%;

        &> :nth-child(1) {
          //span
          width: $item-width*1.5;
        }

      }
    }
  }
}

@media screen and (max-width:600px) {
  .total {
    margin-left: $item-width*0.1;
    margin-top: $item-height * 5;

    .content {
      margin-left: $item-width*0.2;
      margin-top: $item-height*1.5;

      .item {
        height: $item-height*5;
        width: 100%;

        &> :nth-child(1) {
          //span
          width: $item-width*1.8;
        }
      }
    }
  }
}
</style>
